import React, { Component } from 'react'
import Elem, {Div, NavWrapper, LinkPrev } from '../components/Elem'
import App from '../components/App'
import AceEditor from '../components/Ace'
export default class inline_block extends Component {
  constructor() {
    super()
    this.arr1 = []
    for (var i = 0; i < 2; i++) {
      this.arr1.push(i)
    }
    this.state = {
      style_box: `.box {
    float: left;
    width: 200px;
    height: 100px;
    margin: 1em;
}
.after-box {
    clear: left;
}`,
      style_box2: `.box2 {
    display:inline-block;
    width: 200px;
    height: 100px;
    margin: 1em;
}`,

      mode: 'css',
      displayAce: 'none',
      displayAce2: 'none',
      after_box: 'clear:left;',
    }
  }
  onChange = newValue => {
    this.setState({
      style_box: newValue,
    })
  }
  onChange2 = newValue => {
    this.setState({
      style_box2: newValue,
    })
  }

  onChange_after = newValue => {
    this.setState({
      after_box: newValue,
    })
  }
  box1 = key => {
    return (
      <Elem key={key} className="box" css={this.state.style_box}>
        <p>I'm floating!</p>
      </Elem>
    )
  }
  box2 = key => {
    return (
      <Elem key={key} className="box2">
        <p>I am inline box!</p>
      </Elem>
    )
  }
  render() {
    var boxes = this.arr1.map((one, key) => {
      return this.box1(key)
    })
    var boxes2 = this.arr1.map((one, key) => {
      return this.box2(key)
    })
    return (
      <App>
            <React.Fragment>
        <h1 className="content">inline-block</h1>
        <p className="content">
          You can create a grid of boxes that fills the browser width and wraps
          nicely. This has been possible for a long time using{' '}
          <code>float</code>, but now with <code>inline-block</code> it's even
          easier. <code>inline-block</code> elements are like{' '}
          <code>inline</code> elements but they can have a width and height.
          Let's look at examples of both approaches.
        </p>
        <div className="content" style={{ position: 'relative' }}>
          <h2>The Hard Way (using float)</h2>

          
            <AceEditor
              css={this.state.style_box}
              cssChange={this.onChange}
            />
            </div>
        <Div className="content" css={this.state.style_box}>
          {boxes}
          <Elem section green className="after-box">
            <p>I'm using clear so I don't float next to the above boxes.</p>
          </Elem>
        </Div>
        <div className="content" style={{ position: 'relative' }}>
          <h2>The Easy Way (using inline-block)</h2>
          <p>
            You can achieve the same effect using the <code>inline-block</code>{' '}
            value of the <code>display</code> property.
          </p>

             <AceEditor
              css={this.state.style_box2}
              cssChange={this.onChange2}
            />
      
        </div>
        <Div className="content" css={this.state.style_box2}>
          {boxes2}
          <Elem green section>
            <p>
              I don't have to use <code>clear</code> in this case. Nice!
            </p>
          </Elem>
        </Div>
        <p className="content">
          You have to do extra work for{' '}
          <a href="http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/">
            IE6 and IE7 support
          </a>{' '}
          of <code>inline-block</code>. Sometimes people talk about{' '}
          <code>inline-block</code> triggering something called{' '}
          <code>hasLayout</code>, though you only need to know about that to
          support old browsers. Follow the previous link about IE6 and IE7
          support if you're curious to learn more. Otherwise, let's continue.
        </p>
      </React.Fragment>
            <NavWrapper>
          <LinkPrev href="/media_queries/">Previous</LinkPrev>
          <LinkPrev href="/inline_block_layout/">Next</LinkPrev>
        </NavWrapper>
        <footer>6 / 20</footer>
      </App>

    )
  }
}
